<template>
  <div class="main">
    <div class="top clearfix">
      <div class="carousel">
        <el-carousel :interval="5000" arrow="always" style="border-radius: 5px">
          <el-carousel-item v-for="item in imgList" :key="item.id">
            <img :src="item.idView" class="bannerImage" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="notice">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix" style="background-color: #ecf5ff">
            <span style="color: #409eff; font-size: 16px">最新通知</span>
            <i class="el-icon-arrow-right fr" style="line-height: 22px"></i>
            <el-button style="float: right; padding: 3px 0" type="text"
              >更多</el-button
            >
          </div>
          <div
            v-for="notion in notionArticleList"
            :key="notion.articleId"
            class="text item"
            @click="toLookPost(notion.articleId)"
          >
            {{ notion.title }}
            <span class="fr">{{ notion.postTime }}</span>
          </div>
        </el-card>
      </div>
    </div>
    <div class="under">
      <div class="sonModule">
        <div class="header clearfix">
          <h3 class="sonModuleTitle fl">入学指南</h3>
          <span style="margin: 0 10px; line-height: 22px; color: #97a3ad"
            >|</span
          >
          <span style="line-height: 22px; color: #97a3ad; font-size: 13px"
            >入学必看</span
          >
          <span class="fr moreInfo" @click="toMoreStudent">更多</span>
        </div>
        <ul class="sonModuleContainer clearfix">
          <li
            v-for="article in guideArticleList"
            :key="article.articleId"
            class="sonModuleItem fl"
          >
            <el-card
              shadow="hover"
              :body-style="{
                padding: '10px',
                width: '250px',
              }"
            >
              <h6>{{ article.title }}</h6>
              <p class="sonText">{{ article.summary }}</p>
              <span>{{ article.postTime }}</span>
              <span class="fr looktag" @click="toLookPost(article.articleId)"
                >查看</span
              >
            </el-card>
          </li>
        </ul>
      </div>
      <div class="sonModule">
        <div class="header clearfix">
          <h3 class="sonModuleTitle fl">日常生活</h3>
          <span style="margin: 0 10px; line-height: 22px; color: #97a3ad"
            >|</span
          >
          <span style="line-height: 22px; color: #97a3ad; font-size: 13px"
            >了解学长学姐们的奇闻异事</span
          >
          <span class="fr moreInfo" @click="toMoreStudent">更多</span>
        </div>
        <ul class="sonModuleContainer clearfix">
          <li
            v-for="article in dailyArticleList"
            :key="article.articleId"
            class="sonModuleItem fl"
          >
            <el-card
              shadow="hover"
              :body-style="{
                padding: '10px',
                width: '250px',
              }"
            >
              <h6>{{ article.title }}</h6>
              <p class="sonText">{{ article.summary }}</p>
              <span>{{ article.postTime }}</span>
              <span class="fr looktag" @click="toLookPost(article.articleId)"
                >查看</span
              >
            </el-card>
          </li>
        </ul>
      </div>
      <div class="sonModule">
        <div class="header clearfix">
          <h3 class="sonModuleTitle fl">学业疑难</h3>
          <span style="margin: 0 10px; line-height: 22px; color: #97a3ad"
            >|</span
          >
          <span style="line-height: 22px; color: #97a3ad; font-size: 13px"
            >了解在工大学习的点点滴滴</span
          >
          <span class="fr moreInfo" @click="toMoreStudent">更多</span>
        </div>
        <ul class="sonModuleContainer clearfix">
          <li
            v-for="article in studyArticleList"
            :key="article.articleId"
            class="sonModuleItem fl"
          >
            <el-card
              shadow="hover"
              :body-style="{
                padding: '10px',
                width: '250px',
              }"
            >
              <h6 class="shareTitle">{{ article.title }}</h6>
              <p class="sonText">{{ article.summary }}</p>
              <span>{{ article.postTime }}</span>
              <span class="fr looktag" @click="toLookPost(article.articleId)"
                >查看</span
              >
            </el-card>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import searchApi from "@/api/searchApi";
export default {
  name: "newstudent",
  data() {
    return {
      articleList: [],
      notionArticleList: [],
      guideArticleList: [],
      dailyArticleList: [],
      studyArticleList: [],
      imgList: [
        // { id: 0, idView: require("@/views/MyHome/NewStudent/images/one.jpg") },
        // { id: 1, idView: require("@/views/MyHome/NewStudent/images/two.jpg") },
        // {
        //   id: 2,
        //   idView: require("@/views/MyHome/NewStudent/images/three.jpg"),
        // },
        {
          id: 0,
          idView:
            "http://www.zjut.edu.cn/_upload/article/images/c4/dc/6cb0792a49998ef3b0675d30c400/032e6a44-6abb-4701-b711-6ecaf229dff9_s.jpg",
        },
        {
          id: 1,
          idView:
            "http://www.zjut.edu.cn/_upload/article/images/73/90/eabb460847159cedb9a1d03f311f/46d3df36-c335-4ffb-b715-9a97ddd9feb4_s.jpg",
        },
        {
          id: 1,
          idView:
            "http://www.zjut.edu.cn/_upload/article/images/4c/7f/1b4bd54746ac9ff41164ba7f4b90/100ef206-12c3-43b9-943f-f16d7ed81540_s.jpg",
        },
      ],
    };
  },
  created() {
    this.selectBoardEssayByTag("", "通知", 0, 1, 8, 2);
    this.selectBoardEssayByTag("", "入学指南", 0, 1, 8, 2);
    this.selectBoardEssayByTag("", "日常生活", 0, 1, 8, 2);
    this.selectBoardEssayByTag("", "学业疑难", 0, 1, 8, 2);
  },
  methods: {
    toMoreStudent() {
      this.$router.push({
        name: "nstudent",
      });
    },
    selectBoardEssayByTag(title, tag, findType, pageNum, pageSize, pBoardId) {
      searchApi
        .selectBoardEssayByTag(
          title,
          tag,
          findType,
          pageNum,
          pageSize,
          pBoardId
        )
        .then((response) => {
          if (tag == "入学指南") {
            this.guideArticleList = response.data.records;
          } else if (tag == "日常生活") {
            this.dailyArticleList = response.data.records;
          } else if (tag == "学业疑难") {
            this.studyArticleList = response.data.records;
          } else {
            this.notionArticleList = response.data.records;
            this.packageNotionArticle();
          }
        });
    },
    packageNotionArticle() {
      for (var i = 0; i < this.notionArticleList.length; i++) {
        this.notionArticleList[i].title =
          this.notionArticleList[i].title.substring(0, 15) + "...";
        const date = new Date(this.notionArticleList[i].postTime);
        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const day = date.getDate().toString().padStart(2, "0");
        const formattedDateString = `${month}-${day}`;
        this.notionArticleList[i].postTime = formattedDateString;
      }
    },
    toLookPost(articleId) {
      this.$router.push({
        path: "/lookpost/" + articleId,
      });
    },
  },
};
</script>

<style scoped>
.main {
  float: left;
  width: 95%;
  height: 660px;
  margin: 0 10px;
  border-radius: 5px;
  /* background-color: white; */
}

.shareTitle {
  /* 主要代码 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 几行后显示省略号 */
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.carousel {
  float: left;
  width: 69%;
  height: 300px;
  margin-right: 1%;
  /* background-color: pink; */
}
.bannerImage {
  width: 100%;
  height: 300px;
}

.notice {
  float: left;
  width: 30%;
  height: 300px;
  border-radius: 5px;
  background-color: blue;
}
.text {
  font-size: 14px;
}

.item {
  /* margin-bottom: 18px; */
  padding: 10px 5px;
}
.item:hover {
  background-color: #f2f6fc;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  /* width: 480px; */
  height: 300px;
  /* padding: none; */
}

.under {
  /* height: 1300px;/ */
  padding: 20px;
  border-radius: 5px;
  margin-top: 10px;
  background-color: white;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
}

.sonModule {
  /* height: 280px; */
  padding: 10px;
  border: 1px solid #b3d8ff;
  border-radius: 5px;
  margin-bottom: 20px;
  /* background-color: pink; */
}
.sonModuleTitle {
  color: #fc5531;
  padding-left: 5px;
  margin-bottom: 5px;
}
.moreInfo {
  font-size: 13px;
  color: #fc5531;
}
.moreInfo:hover {
  cursor: pointer;
}
.sonModuleItem {
  margin-right: 25px;
  margin-top: 10px;
}
.sonModuleItem:hover {
  cursor: pointer;
}
.sonText {
  margin: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #97a3ad;
}

.looktag {
  border-radius: 2px;
  padding: 3px 5px;
  color: #fc5531;
  background-color: #feddd6;
  font-size: 12px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

h6 {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

p {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
